<template>
    <div class="body">
        <!--导航-->
        <el-breadcrumb id="arrow" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$route.params.channel}}</el-breadcrumb-item>
        </el-breadcrumb>
        <!--新闻列表开始循环-->
        <div class="new_div">
            <div @click="to_detail(v.weburl)" v-for="v in news"
                 v-loading="loading"
                 element-loading-text="拼命加载中"
                 class="news">
                <img :src="v.pic" alt="图片加载失败">
                <!--标题-->
                <div  class="new_info">
                    <div style="font-size: 25px">{{v.title}}</div>
                    <!--时间-->
                    <div style="color: #666666">
                        {{v.time}}
                    </div>
                    <div style="">
                        {{v.src}}
                    </div>
                    <!--查看-->
                    <div class="info_1">
                        <a :href="v.weburl">详情</a>
                    </div>
                </div>
            </div>
        </div>
        <!--分页开始-->
        <el-pagination id="page"
                background
                layout="prev, pager, next"
                :current-page.sync="current_page"
                @current-change="currentChange()"
                :total="1000">
        </el-pagination>

    </div>
    
</template>

<script>
    import axios from 'axios'
    export default {
        name: "news",
        data(){
            return{
                news:null,
                loading:true,
                current_page:1,
            }
        },
        /*计算属性*/
        computed:{
            page(){
                return (this.current_page-1)*10;
            }
        },
        created(){
            //初始化数据
            let url='https://www.dragonjun.com/boot/query/get_new_detail';
            let data=JSON.stringify({"channel":this.$route.params.channel,"pagenum":10,"page":this.page});
            axios.post(url,data,{
                headers:{
                    'Content-Type': 'application/json',
                }
            }).then((data)=>{
                //console.log(data);
                this.news=data.data.data.result.list;
                this.loading=false;
            }).catch((error)=>{
                console.log(error);
            })

        },
        methods:{
            to_detail(url){
              location.href=url;
            },
            /*分页*/
            currentChange(){
                let url='https://www.dragonjun.com/boot/query/get_new_detail';
                let data=JSON.stringify({"channel":this.$route.params.channel,"pagenum":10,"page":this.page});
                axios.post(url,data,{
                    headers:{
                        'Content-Type': 'application/json',
                    }
                }).then((data)=>{
                    //console.log(data);
                    this.news=data.data.data.result.list;
                    this.loading=false;
                }).catch((error)=>{
                    console.log(error);
                })
            }

        },
    }
</script>

<style scoped>
    .body{
     //border: 1px solid red;
        height: auto;
        width: 1300px;
        margin: 5% auto;
    }
    #arrow{
        font-size: 20px;
    }
    .new_div{
        width: 1300px;
        height: auto;
        overflow: hidden;
        margin: 20px auto;
        //border: 1px solid black;
    }
    .news{
        width: 1200px;
        height: auto ;
        overflow: hidden;
        margin: 10px auto;
        //border: 1px solid blueviolet;
        border-radius: 10px;
        transition: all 1s;
       border: 1px solid wheat;
    }
    .news:hover{
        box-shadow: 0 10px 5px #666666;
        cursor: pointer;
        transform: translate(0,-5px);

    }
    .news img{
        float: left;
        width: 260px;
        height: 155px;
        margin-top: 2px;
        margin-left: 2px;
        border-radius: 10px;
    }
    .new_info{
        //border: 1px solid #b3d8ff;
        height: auto;
        width: auto;
        line-height: 40px;
        float: left;
    }
    .new_info div{
        margin-left: 20px;
    }
    .info_1 a{
        color: #3a8ee6;
        text-decoration: none;
    }
    #page{
        margin-left: 34%;
    }
</style>